<form [formGroup]="formGroup">
    <div class="row justify-content-center">
        <div class="row justify-content-center" style="margin-top: 80px">
            <a href="/">
                <img src="../../../content/images/cubeai128.png" style="height: 80px">
            </a>
        </div>
    </div>
    <br>
    <div class="row justify-content-center">
        <mat-card>
            <div class="modal-header">
                <h4>注册新用户</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <mat-form-field style="width: 100%">
                            <input matInput formControlName="login" type="text" placeholder="用户帐号" maxlength="50">
                            <mat-error *ngIf="(login.dirty || login.touched) && login.hasError('required')">
                                必须输入用户帐号！
                            </mat-error>
                            <mat-error *ngIf="(login.dirty || login.touched) && login.hasError('maxlength')">
                                用户帐号不能超过50个字符！
                            </mat-error>
                            <mat-error *ngIf="(login.dirty || login.touched) && login.hasError('pattern')">
                                用户帐号只能包含字母、数字或者Email地址！
                            </mat-error>
                            <mat-error *ngIf="login.hasError('unique')">
                                该帐号名已经存在，请另外选择一个！
                            </mat-error>
                            <mat-error *ngIf="login.pending">
                                正在验证唯一性......
                            </mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col">
                        <mat-form-field style="width: 100%">
                            <input matInput formControlName="fullName" type="text" placeholder="真实姓名" maxlength="50">
                            <mat-error *ngIf="(fullName.dirty || fullName.touched) && fullName.hasError('maxlength')">
                                姓名长度不能超过50个字符！
                            </mat-error>
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <mat-form-field style="width: 100%">
                            <input matInput formControlName="email" type="email" placeholder="电子邮箱" maxlength="50">
                            <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('required')">
                                必须输入电子邮箱地址！
                            </mat-error>
                            <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('email')">
                                电子邮箱地址无效！
                            </mat-error>
                            <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('maxlength')">
                                本字段长度不能超过50个字符！
                            </mat-error>
                            <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('minlength')">
                                本字段长度最少5个字符！
                            </mat-error>
                            <mat-error *ngIf="email.hasError('unique')">
                                该email已存在，请另外选择一个！
                            </mat-error>
                            <mat-error *ngIf="email.pending">
                                正在验证唯一性......
                            </mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col">
                        <mat-form-field style="width: 100%">
                            <input matInput formControlName="phone" type="tel" placeholder="手机号码"
                                   minlength=5 maxlength="20" pattern="^[0-9]*$">
                            <mat-error *ngIf="(phone.dirty || phone.touched) && phone.hasError('required')">
                                必须输入电话号码！
                            </mat-error>
                            <mat-error *ngIf="(phone.dirty || phone.touched) && phone.hasError('maxlength')">
                                本字段长度不能超过20个字符！
                            </mat-error>
                            <mat-error *ngIf="(phone.dirty || phone.touched) && phone.hasError('minlength')">
                                本字段长度最少5个字符！
                            </mat-error>
                            <mat-error *ngIf="(phone.dirty || phone.touched) && phone.hasError('pattern')">
                                手机号码只能包含数字！
                            </mat-error>
                            <mat-error *ngIf="phone.hasError('unique')">
                                该号码已存在，请另外选择一个！
                            </mat-error>
                            <mat-error *ngIf="phone.pending">
                                正在验证唯一性......
                            </mat-error>
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <mat-form-field style="width: 100%">
                            <input matInput formControlName="password" type="password" placeholder="密码" (change)="confirmPassword.setValue('')">
                            <mat-error *ngIf="password.value && password.hasError('passwordStrong')">
                                {{password.errors.passwordStrong.value}}
                            </mat-error>
                        </mat-form-field>
                    </div>
                    <div class="col">
                        <mat-form-field style="width: 100%">
                            <input matInput formControlName="confirmPassword" type="password" placeholder="再次输入密码">
                            <mat-error *ngIf="confirmPassword.value && confirmPassword.hasError('passwordMatch')">
                                {{confirmPassword.errors.passwordMatch.value}}
                            </mat-error>
                        </mat-form-field>
                    </div>
                </div>

                <div class="alert alert-success" *ngIf="status === 'success'">
                    <br>
                    <p>帐号注册成功！帐号激活码已发送至你注册时提供的电子邮箱： {{email.value}}</p>
                    <p>请点击邮件中链接地址或将其复制到浏览器地址框打开页面来激活帐号....</p>
                </div>

                <div class="alert alert-danger" *ngIf="status === 'fail'">
                    <br>
                    <p>发送注册信息失败，请检查用户名或邮箱地址是否已注册...</p>
                </div>
            </div>

            <div class="modal-footer">
                <button mat-raised-button color="primary" (click)="onRegister()" [disabled]="formGroup.invalid || status === 'success'">
                    <span class="fa fa-check-circle">&nbsp;注册</span>
                </button>
            </div>
        </mat-card>
    </div>
</form>

